<template>
  <div class="w-full h-full flex flex-col items-center bg-[#F8F8F8] overflow-y-scroll">
    <div class="w-724px min-h-[calc(100vh-64px)] flex flex-col items-center">
      <div class="w-724px min-h-100vh px-18px box-border bg-white flex flex-col items-center">
        <div
          class="mt-18px w-660px h-[fit-content] flex flex-col group"
          v-for="zone in zoneList"
          :key="zone.id"
          @click="handleComment(zone)"
        >
          <div class="w-full h-44px flex flex-row items-center">
            <div style="width: 44px; height: 44px">
              <img
                class="w-44px h-44px group-hover:scale-103 transition rounded-[50%]"
                :src="zone.header_img"
                style="height: 44px"
              />
            </div>
            <div class="ml-10px h-44px flex-1">
              <div class="mt-2px h-16px leading-16px text-16px text-#333333">
                {{ zone.nick_name }}
              </div>
              <div class="mt-8px h-12px leading-12px text-12px text-#999999">
                {{ dayjs(zone.created_at).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
            <a-trigger
              trigger="click"
              :unmount-on-close="false"
              v-if="userInfo.user_id === zone.user_id"
            >
              <img
                src="@/assets/more.png"
                alt=""
                class="cursor-pointer w-14px h-18px opacity-0 transition-all group-hover:!opacity-100"
                @click.stop="() => {}"
              />
              <template #content>
                <div class="w-120px h-auto bg-white py-10px rounded-[4px] shadow-md">
                  <div
                    class="hover:bg-gray-100 w-full p-12px cursor-pointer text-center"
                    @click="handleDelete(zone.id)"
                  >
                    删除
                  </div>
                </div>
              </template>
            </a-trigger>
          </div>
          <div class="mt-4px ml-54px w-608px h-[fit-content]">
            <div class="w-608px text-14px leading-18px text-#333333 break-all">
              {{ zone.content }}
            </div>
            <img
              v-if="zone.media_url"
              :src="zone.media_url"
              alt=""
              class="mt-12px w-[90%] !max-w-608px h-[fit-content] object-cover rounded-12px max-h-500px"
            />
            <div class="mt-12px mb-18px flex flex-row">
              <div class="mr-42px cursor-pointer flex flex-row items-center">
                <img
                  :src="likeFillIcon"
                  alt=""
                  class="w-22px h-20px"
                  @click.stop="handleCancelLike(zone.id)"
                  v-if="zone.liked"
                />
                <template v-else>
                  <AuthComponents @onClick="handleLike(zone.id)">
                    <img :src="likeIcon" alt="" class="w-22px h-20px" />
                  </AuthComponents>
                </template>

                <div class="ml-6px h-14px text-14px leading-14px text-#999999">
                  {{ zone.like_count }}
                </div>
              </div>

              <div
                class="mr-42px cursor-pointer flex flex-row items-center"
                @click="handleComment(zone)"
              >
                <img src="@/assets/comment.png" alt="" class="w-22px h-20px" />
                <div class="ml-6px h-14px text-14px leading-14px text-#999999">
                  {{ zone.comment_count }}
                </div>
              </div>
              <div class="mr-42px cursor-pointer flex flex-row items-center">
                <img src="@/assets/sayhi.png" alt="" class="w-22px h-20px" />
                <div class="ml-6px h-14px text-14px leading-14px text-#999999">打声招呼</div>
              </div>
            </div>
          </div>
        </div>
        <LoadMore
          :total="total"
          :loading="loading"
          :pageInfo="pageInfo"
          @loadMore="handleLoadMore"
        />
      </div>
    </div>

    <CommentModal
      v-model:visible="commentModalVisible"
      :zone="selectZone"
      @updateZone="handleUpdateZone"
      @clickLick="handleLike"
      @clickCancel="handleCancelLike"
    />
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useVModels } from '@vueuse/core'
import dayjs from 'dayjs'
import { likeZone, cancelLikeZone, deleteZone } from '@/api/zone'
import likeIcon from '@/assets/like.png'
import likeFillIcon from '@/assets/like_fill.png'
import AuthComponents from '@/components/authComponents/index.vue'
import LoadMore from '@/components/loadMore/index.vue'
import { useUserStore } from '@/store'
import CommentModal from './comment-modal.vue'
import { Message } from '@arco-design/web-vue'
// import emitter from '@/utils/mitt'
const commentModalVisible = ref(false)

const props = defineProps(['list', 'loading', 'total', 'pageInfo'])
const emits = defineEmits(['update:list', 'loadMore'])
const { list: zoneList } = useVModels(props, emits)
const selectZoneId = ref(null)
const selectZone = computed(() => {
  return zoneList.value.find((item) => item.id === selectZoneId.value) || {}
})
const { userInfo } = useUserStore()
const handleLoadMore = () => {
  emits('loadMore')
}
const handleDelete = (id) => {
  deleteZone(id)
    .then(() => {
      Message.success('删除成功')
      zoneList.value = zoneList.value.filter((item) => item.id !== id)
    })
    .catch(() => {
      Message.error('删除失败')
    })
}
const handleUpdateZone = (zone) => {
  zoneList.value.forEach((item) => {
    if (item.id === zone.id) {
      item = Object.assign(item, zone)
    }
  })
}
const handleLike = (id) => {
  likeZone(id).then((res) => {
    zoneList.value.forEach((item) => {
      if (item.id === id) {
        item.liked = true
        item.like_count = res
      }
    })
  })
}
const handleCancelLike = (id) => {
  cancelLikeZone(id).then((res) => {
    zoneList.value.forEach((item) => {
      if (item.id === id) {
        item.liked = false
        item.like_count = res
      }
    })
  })
}

const handleComment = (zone) => {
  selectZoneId.value = zone.id
  commentModalVisible.value = true
}
</script>
<style lang="less" scoped>
.trigger {
  padding: 10px;
  width: 200px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
